<template>
    <div>
        <Form ref="form" inline :model="data" label-position="left">
            <FormItem prop="date" label-for="date">
                <DatePicker :editable="false" type="daterange" :options="dateOptions" element-id="date" v-model="data.date"
                    placeholder="请选择创建日期" />
            </FormItem>
            <FormItem prop="name" label-for="name">
                <Input v-model="data.name" v-width="260" placeholder="请输入患者姓名/手机号/诊疗号" />
            </FormItem>
            <FormItem prop="status" label-for="status">
                <Select v-width="100" v-model="data.status" placeholder="患者状态" element-id="status" clearable>
                    <Option :value="0">失效</Option>
                    <Option :value="1">待跟踪</Option>
                    <Option :value="2">预约</Option>
                    <Option :value="3">到诊</Option>
                    <Option :value="4">已到老患者</Option>
                </Select>
            </FormItem>
            <FormItem prop="personnel" label-for="personnel">
                <Select v-width="80" v-model="data.personnel" placeholder="归属人" element-id="personnel" clearable>
                    <Option :value="0">高玲</Option>
                    <Option :value="1">王艳</Option>
                    <Option :value="2">刘志强</Option>
                </Select>
            </FormItem>
            <FormItem prop="disease" label-for="disease">
                <Select v-width="100" v-model="data.disease" placeholder="病种" element-id="diagnosis" clearable>
                    <Option :value="0">白癜风</Option>
                    <Option :value="1">非白</Option>
                    <Option :value="2">皮杂</Option>
                    <Option :value="3">白斑待查</Option>
                </Select>
            </FormItem>
            <FormItem prop="channel" label-for="channel">
                <Select v-width="180" v-model="data.channel" multiple placeholder="渠道来源" element-id="channel" clearable>
                    <Option :value="0">百度</Option>
                    <Option :value="1">门户</Option>
                    <Option :value="2">优化</Option>
                    <Option :value="3">广告</Option>
                </Select>
            </FormItem>
            <FormItem prop="tag" label-for="tag">
                <Select v-model="data.tag" filterable multiple placeholder="请选择部位" element-id="tag" :max-tag-count="3">
                    <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </FormItem>
            <FormItem>
                <CheckboxGroup v-model="lxitem">
                    <Checkbox label="有微信"></Checkbox>
                    <Checkbox label="无微信"></Checkbox>
                    <Checkbox label="有电话"></Checkbox>
                    <Checkbox label="无电话"></Checkbox>
                </CheckboxGroup>
            </FormItem>
            <FormItem>
                <Button @click="haneleMultipleTag" type="primary" :disabled="!selectedData.length">批量微信标签</Button>
                <Button class="ivu-ml-8" @click.native="handleContextMenuEdit" type="primary"
                    :disabled="!selectedData.length">批量切换</Button>
            </FormItem>
        </Form>
        <Modal :mask-closable="false" title="批量添加微信标签" width="518" v-model="multipleTag" @on-ok="ok">
            <Form :labelWidth="118">
                <FormItem label="已选人数：">526</FormItem>
                <FormItem label="可添加人数：">
                    326<Tooltip max-width="200" content="未绑定微信的患者不可同步添加微信标签">
                        <Icon class="ivu-ml-8" type="md-help-circle" />
                    </Tooltip>
                </FormItem>
                <FormItem label="录入标签：">
                    <Input show-word-limit maxlength="10" placeholder="请输入标签名称" />
                </FormItem>
            </Form>
        </Modal>
        <Modal @on-ok="ok" v-model="cutView" width="360" title="切换患者视图" :mask-closable='false'>
            <Select>
                <Option v-for="item in viewList" :key="item.vaule" :value="item.value">
                    {{item.label}}
                </Option>
            </Select>
        </Modal>
    </div>
</template>
<script>
    export default {
        components: {},
        props: ['selectedData'],
        data() {
            return {
                multipleTag: false,
                viewType: false,
                cutView: false,
                lxitem: ['有微信', '无微信', '有电话', '无电话'],
                tagList: [
                    {
                        value: '活动',
                        label: '活动'
                    },
                    {
                        value: '专家',
                        label: '专家'
                    },
                    {
                        value: '测试',
                        label: '测试'
                    }
                ],
                viewList: [
                    {
                        value: '抖音质量患者',
                        label: '抖音质量患者'
                    },
                    {
                        value: '重要患者',
                        label: '重要患者'
                    },
                    {
                        value: '有意向',
                        label: '有意向'
                    }
                ],
                data: {
                    name: '',
                    date: '',
                    consultant: '',
                    personnel: '',
                    status: '',
                    treatment: '',
                    risk: '',
                    disease: '',
                    channel: '',
                    tag: ''
                },
                cityList1: [
                    {
                        value: '头部',
                        label: '头部'
                    },
                    {
                        value: '四肢',
                        label: '四肢'
                    },
                    {
                        value: '手部',
                        label: '手部'
                    }
                ],
                dateOptions: {
                    shortcuts: [
                        {
                            text: '今天',
                            value: () => {
                                const date = this.$Date(new Date()).format('YYYY-MM-DD')
                                return [date, date]
                            }
                        },
                        {
                            text: '昨天',
                            value: () => {
                                let date = new Date()
                                date.setTime(date.getTime() - 3600 * 1000 * 24)
                                date = this.$Date(date).format('YYYY-MM-DD')
                                return [date, date]
                            }
                        },
                        {
                            text: '本周',
                            value: () => {
                                const date = new Date()
                                const start = this.$Date(date).day(1).format('YYYY-MM-DD')
                                const end = this.$Date(date).day(7).format('YYYY-MM-DD')
                                return [start, end]
                            }
                        },
                        {
                            text: '本月',
                            value: () => {
                                const date = new Date()
                                const start = this.$Date(date).date(1).format('YYYY-MM-DD')
                                const end = this.$Date(date).add(1, 'month').date(1).subtract(1, 'day').format('YYYY-MM-DD')
                                return [start, end]
                            }
                        }
                    ]
                }
            }
        },
        methods: {
            haneleMultipleTag() {
                this.multipleTag = true
            },
            ok() {
                this.$Message.success('添加成功')
                this.$emit('on-get')
            },
            handleContextMenuEdit() {
                this.cutView = true
            },
            ok1() {
                this.$Message.success('切换成功！')
            }
        },
        mounted() {

        }
    }
</script>
<style lang='less' scoped>
</style>